<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <canvas class="mycanvas" width="500" height="500">

  </canvas>
  <script>
    // 加载3张图片 ，然后把3张图片通过pomise返还出来 ，接下来通过 画布绘制到canvas里
    // 等待3张图片 全部加载完毕，通过promise把 3张图片对象 返还出来，在通过canvas绘制到画布上。
    // 预加载： 把所有图片或者资源提前加载好 然后再使用。

    let canvas = document.querySelector(".mycanvas");
    let ctx = canvas.getContext("2d");

    let img1 = new Image();
    img1.src = "";
    img1.onload = function () {
      ctx.drawImage(img1, 0, 0, 100, 100);
    }


    let img2 = new Image();
    img2.src = "";
    img2.onload = function () {
      ctx.drawImage(img1, 200, 200, 100, 100);
    }


    let img3 = new Image();
    img3.src = "";
    img3.onload = function () {
      ctx.drawImage(img3, 300, 200, 100, 100);
    }



        // 1，复习 2.加载图片 3.几个promise的练习题





  </script>
</body>

</html>